<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body{
            background-color: beige
        }
        .container{
            /* background-image: url('./bg.jpg'); */
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .panel{
            opacity: .8;
        }
        .taskDone{
        text-decoration-line: line-through
    }
    th,table{
        text-align: center
    }
    span{
        color:red;
    }
    </style>
    <title>做爱去做的事</title>
</head>

<body>
    <div class="container col-sm-8 col-sm-offset-2">
        <div id="taskApp">
            <h1 class="text-center">做爱去做的事</h1>
            <!-- Add new task form -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        添加要做的事
                    </h3>
                </div>
                <div class="panel-body">
                    <form v-on:submit='addTask'>
                        <div class="col-sm-8">
                            <input class="form-control" v-model='tasks.name' />
                        </div>

                        <div class="col-sm-4">
                            <input type="submit" value='要去做' class="btn btn-primary btn-block">
                        </div>
                    </form>
                    &nbsp;
                </div>



            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <th>做完了</th>
                        <th>要去做</th>
                        <th>不想去</th>
                    </thead>
                    <tbody>
                        <tr v-for='
                            task in tasks'>
                            <td><input type="checkbox" v-model='task.done'></td>
                            <td><span :class='{taskDone:task.done}'>{{task.name}}</span></td>
                            <td><button class="btn btn-danger btn-block" v-on:click='deleteTask(task)'>不想去做了</button></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script>
    var taskApp = new Vue({
        el: '#taskApp',
        data: {
            tasks: [
                { name: 'gotta do ths task first', done: false },
                { name: 'buy some pet food', done: false },
                { name: 'install fishtank in living room', done: false }
            ]
        },
        methods: {
            addTask: function (e) {
                console.log(e.target.innerText);
                e.preventDefault();
                this.tasks.push({
                    name: this.tasks.name,
                    done: false
                });
            },
            deleteTask: function (task) {
                this.tasks.splice(this.tasks.indexOf(task), '1')
            }
        }
    })
</script>

</html>